<template>
    <div class="layout-box" ref="layout">
        <!-- 顶部灰色导航条 -->
        <div class="nav-head-wrap" ref="nav">
            <div class="nav-head flex-center">
                <div class="nologin wrap flex-between">
                    <div class="welcome text" @click="toHome">您好，欢迎光临生鲜供应平台！</div>
                    
                    <div class="login-nav flex" v-if="clientAccessToken">
                        <div class="item flex" @click="toHome">
                            <img class="icon" src="../assets/icon/icon_home.png" alt="" />
                            <span>平台首页</span>
                        </div>
                        <div class="item flex" @click="toFoot">
                            <img class="icon" src="../assets/icon/icon_foot.png" alt="" />
                            <span>足迹</span>
                        </div>
                        <!-- <div class="item flex" @click="toCart">
                            <img class="icon" src="../assets/icon/icon_shopCar.png" alt="" />
                            <span>购物车<i class="cart-num" v-if="cartTotal">({{ cartTotal }})</i></span>
                        </div> -->
                        <div class="item flex" @click="toCollect">
                            <img class="icon" src="../assets/icon/icon_collect.png" alt="" />
                            <span>收藏夹</span>
                        </div>
                        <div class="item flex" @click="loginOut">
                            <img class="icon" src="../assets/icon/icon_shutdown.png" alt="" />
                            <span>退出登录</span>
                        </div>
                    </div>
                    <el-link v-else @click="toLogin" class="gologin text">[登录]</el-link>
                </div>
            </div>
        </div>
        <div class="content" :style="{ height: contentH + 'px' }">
            <router-view></router-view>
        </div>
        <div class="base-concat flex-center" @click="dialogVisible = true">
            <i class="el-icon-service"></i>
        </div>
        <el-dialog title="联系客服" :visible.sync="dialogVisible" width="500px">
            <div class="code">
                <img :src="customerObj.qrcode" />
            </div>
            <p class="code-text">手机扫描二维码，去联系客服</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="toContact" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
    loginOut
} from '../api/login'
import {
    getCartTotal
} from '../api/cart';
import { customer } from "@/api/user";
export default {
    data() {
        return {
            clientAccessToken: '',
            loginStatus: false,
            contentH: 0,
            cartTotal:'',
            dialogVisible: false,
            customerObj: {}
        };
    },
    created() {
    },
    mounted() {
        if(localStorage.getItem('Client-Access-Token')){
            this.clientAccessToken = localStorage.getItem('Client-Access-Token')
        }else{
            this.clientAccessToken = '';
        }
        // this.clientAccessToken = localStorage.getItem('Client-Access-Token') ? localStorage.getItem('Client-Access-Token') : '';
        console.log('this.clientAccessToken 首页条',this.clientAccessToken)
        var windowHeight = document.documentElement.clientHeight;
        var navH = this.$refs.nav.offsetHeight;
        this.contentH = windowHeight - navH;
        this.customerInfo();
    },
    methods: {
        toHome() {
            if(this.$route.path == '/'){
                return;
            }
            this.$router.replace("/");
        },
        toCart() {
            this.$router.push("/cart");
        },
        toCollect(){
            this.$router.push("/user/collect");
        },
        toFoot(){
            this.$router.push("/user/foot");
        },
        toLogin(){
            this.$router.push("/login");
        },
        loginOut() {
            this.$msgbox({
                title: '提示',
                message: "此操作将退出登录, 是否继续",
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '退出中...';
                        loginOut().then(res => {
                            if (res.code == 0) {
                                instance.confirmButtonLoading = false;
                                instance.confirmButtonText = '确定';
                                localStorage.removeItem('Client-Access-Token');
                                // localStorage.clear();
                                this.$message.success('退出成功')
                                setTimeout(() => {
                                    this.$router.replace('/login');
                                }, 1000)
                                done();
                            }
                        })
                    } else {
                        done();
                    }
                }
            })
        },
        toContact() {
            this.dialogVisible = false;
            window.open(this.customerObj.link_url, '_blank');
        },
        customerInfo() {
            customer().then(res => {
                if (res.code == 0) {
                    if(res.data){
                        this.customerObj = res.data;
                    }
                    
                }
            })
        },
    },
};
</script>
<style scoped>
</style>
<style lang="scss" scoped>
@import "@/assets/css/fit.css";
.layout-box {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
.nav-head-wrap {
    width: 100%;
    height: 34px;
}

.nav-head {
    width: 100%;
    height: 34px;
    background-color: #f8f8f8;
    flex-shrink: 0;
    font-size: 14px;
    align-items: center;
    color: #8f8f8f;
    font-weight: bold;
    // position: fixed;
    // left:0;
    // top:0;
    // z-index:22;
    .login-nav {
        gap: 0 12px;

        .item {
            align-items: center;
            font-size: 14px;
            color: #8f8f8f;
            gap: 0 2px;
            span {
                &:hover {
                    color: var(--main-color);
                }
            }
            .icon {
                width: 20px;
                height: 20px;
            }
        }
    }
}
.cart-num{
    font-weight: normal;
    font-size: 12px;
}
.welcome {
    display: flex;
    align-items: center;
    &:hover {
        color: var(--main-color);
    }
}

.gologin {
    height: 20px;
}
.content {
}

::-webkit-scrollbar {
    display: none;
}
.code {
    width: 200px;
    height: 200px;
    margin: auto;
    img {
        width: 100%;
        height: 100%;
    }
}
.code-text {
    text-align: center;
}
</style>